<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>钉钉-阿里巴巴旗下品牌</title>
    <link rel="stylesheet" href="css/base.css">
    <link rel="icon" href="img/TB1az8zBhD1gK0jSZFsXXbldVXa-1150-1074.png">
    <link rel="stylesheet" href="css/information.css">
</head>
<body>
    <div class="top">
        <img src="img/TB1KLz1bycKOu4jSZKbXXc19XXa-1080-320.png" alt="">
    </div>
    <div class="main">
        <div class="content">
            <div class="img">
                <img src="img/TB12Mx9gYPpK1RjSZFFXXa5PpXa-468-87.png" alt="">
            </div>

            <div class="title">
                <p>完善企业信息</p>
            </div>

            <div class="input">
                <input type="text" placeholder="输入企业(团队)名称" class="inp en-inp" >
                <p class="en-p p1">企业(团队)名称需要3-50个字符</p>
            </div>
            <div class="input">
                <input type="text" placeholder="输入姓名" class="inp name-inp" >
                <p class="en-p p2">姓名，需50个字符以下</p>
            </div>
            <div class="input">
                <input type="password" placeholder="密码至少8个字符，不能全是字母或者数字" class="inp pwd">
                <p class="en-p p3">密码至少8个字符，不能全是字母或数字</p>
            </div>

            <button class="btn" type="submit" onclick="valide()">同意协议并注册</button>

            <!--    右边的咨询-->
            <div class="consult">
                <a href="">
                    <img src="img/TB1BLyyXSzqK1RjSZFLXXcn2XXa-112-112.png" alt="" >
                </a>

            </div>

        </div>
        <!--    这是底部-->
        <div class="footer">
            <div class="fo-con">
                <img src="img/TB1pHgjwET1gK0jSZFhXXaAtVXa-164-60.png" alt="">
                <a href="download.html" class="btn " >下载钉钉</a>
                <a href="" class="fo-con-em">使用手册&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>
                <a href="" class="fo-con-em">钉钉官网&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>
            </div>
        </div>
    </div>


    <script>
        let enInp=document.querySelector(".en-inp");
        let nameInp=document.querySelector(".name-inp");
        let pwd=document.querySelector(".pwd");
        let enps=document.querySelectorAll(".en-p");
        let inps=document.querySelectorAll(".inp");


        let flag1=false;
        let flag2=false;
        let flag3=false;

        let enp=document.querySelector(".en-p");
        let inp=document.querySelector(".inp");
        let regExp1=/^[\u4E00-\u9FA5A-Za-z0-9]{3,50}/;
        let regExp2=/^[\u4E00-\u9FA5A-Za-z]+$/;
        let regExp3= /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,16}$/;

        document.querySelector(".en-inp").onkeyup=function () {
            if (!regExp1.test(enInp.value)){
                inp.style.borderColor = "red";
                enp.style.display="block";
                return;
            }else {
                inp.style.borderColor = "#40A9FF";
                enp.style.display="none";
                flag1=true;
                return ;
            }
        }
        document.querySelector(".name-inp").onkeyup=function () {
            if (!regExp2.test(nameInp.value)){
                document.querySelector(".name-inp").style.borderColor = "red";
                document.querySelector(".p2").style.display="block";
                return;
            }else {
                document.querySelector(".name-inp").style.borderColor = "#40A9FF";
                document.querySelector(".p2").style.display="none";
                flag2=true;
                return ;
            }
        }
        document.querySelector(".pwd").onkeyup=function () {
            if (!regExp3.test(pwd.value)){
                document.querySelector(".pwd").style.borderColor = "red";
                document.querySelector(".p3").style.display="block";
                return;
            }else {
                document.querySelector(".pwd").style.borderColor = "#40A9FF";
                document.querySelector(".p3").style.display="none";
                flag3=true;
                return ;
            }
        }

        function valide(){
            if ((enInp.value==null||enInp.value=="")&&(nameInp.value==null||nameInp.value=="")&&(pwd.value==null||pwd.value=="")){
                alert("为空");
                return;
            }else if ((flag1==true) && (flag2==true) && (flag3==true)){
                location.href="homePage.html"
            }else {
                alert("输入有误");
                return ;
            }

        }



    </script>

</body>
</html>